<template>
  <main class="tui-main">
    <slot></slot>
  </main>
</template>

<style lang="scss" scoped>
.tui-main {
  display: flex;
  // flex:1 让元素在flex容器中能够自动伸展，充满剩余空间
  // flex-basis:auto 使元素能够优先使用自身内容决定大小
  flex: 1;
  flex-basis: auto;
  // 内容溢出时显示滚动条
  overflow: auto;
  // 确保内边距不会影响元素的最终尺寸
  box-sizing: border-box;
  padding: 20px;
  // 使用line-height实现垂直居中（单行文本）
  line-height: inherit;
  flex-direction: column;
}

/* 当父容器是flex布局且设置了高度时，确保main元素能够正确响应高度设置 */
.tui-container {
  &>.tui-main {
    min-height: 0; // 解决flex布局中子元素内容溢出的问题
  }
}

/* 当有明确的高度样式设置时，尊重外部设置 */
.tui-main[style*="height"],
.tui-main[style*="min-height"],
.tui-main[style*="max-height"] {
  flex-basis: auto !important;
}
</style>